<template>
    <div>
        <el-container>
            <el-header>
                <div>
                  后台管理系统  
                </div>
                
                <div>
                    欢迎管理员--{{$store.getters.getUserinfo.username}}
                    <el-button type="danger" @click="logout" size="mini">
                        退出登录
                    </el-button>
                </div>
            </el-header>
            <el-container>
                <el-aside>
                  <!-- 侧边导航 -->
                  <v-nav></v-nav>
                </el-aside>
                <el-main>
                    <!-- 二级路由出口 -->
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
// 引入侧边导航组件
import vNav from '../components/vNav.vue'
export default {
    data() {
        return {

        };
    },
    components:{
        vNav
    },
    methods:{
        // 退出事件
        logout(){
            // 传false ，用于判断mutations 中，移除登录时存储的信息，并跳转到登录页面
            this.$store.dispatch('changeUserAction',false)
            this.$router.push('/login')
        }
    }
};
</script>

<style  lang="less" scoped>
.el-header {
    background-color: pink;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
